<template>
  <el-dropdown @command="handleCommand" style="margin: 0" class="link-button">
    <el-icon class="link-button-icon"><Link /></el-icon>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="item in menuItems"
          :command="item.command"
          :divided="item.divided"
        >
          <!-- :style="{ fontWeight: item.bold ? 'bolder' : 'normal' }" -->
          <el-icon v-if="item.bold"><StarFilled /></el-icon>
          <el-icon v-else><span style="min-width: 1em" /></el-icon>
          <span style="padding-right: 1em">{{ item.label }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { ref, nextTick, computed } from "vue";
import useSeatStore from "@/store/seat";
const seatStore = useSeatStore();

const menuItems = computed(() => {
  return [
    {
      label: "NAIP (机场图)",
      bold: true,
      command: "airportChart",
      divided: false,
    },
    {
      label: "NAIP (航路图)",
      bold: false,
      command: "routeChart",
      divided: false,
    },
    {
      label: "津贴报表 (一室)",
      bold: false,
      command: "hourTable12",
      divided: true,
    },
    {
      label: "津贴报表 (二室)",
      bold: false,
      command: "hourTable13",
      divided: false,
    },
    {
      label: `打卡 (${currentSeatName.value})`,
      bold: true,
      command: "atcosCurrent",
      divided: true,
    },
    {
      label: "打卡 (SUP01)",
      bold: false,
      command: "atcosSUP01",
      divided: false,
    },
    {
      label: "打卡 (SUP02)",
      bold: false,
      command: "atcosSUP02",
      divided: false,
    },
    {
      label: "打卡 (讲评室)",
      bold: false,
      command: "atcosPREP",
      divided: false,
    },
  ];
});

const handleCommand = (command) => {
  // naip airport
  if (command == "airportChart") {
    let url = "http://192.168.4.6:8088/Content/Vue/index.html#/airport";
    window.open(url, "_blank");
    return;
  }
  // naip route
  if (command == "routeChart") {
    let url = "http://192.168.4.6:8088/Content/Vue/index.html#/routemap";
    window.open(url, "_blank");
    return;
  }
  // room 1 hour table
  if (command == "hourTable12") {
    let url =
      "http://172.22.107.22/WebReport/ReportServer?reportlet=%E6%96%B0%E7%89%88_%E7%AE%A1%E5%88%B6%E6%B4%A5%E8%B4%B4%E4%B8%AA%E4%BA%BA%E6%8A%A5%E8%A1%A8.cpt&op=view&userId=12&orgId=12";
    window.open(url, "_blank");
    return;
  }
  // room 2 hour table
  if (command == "hourTable13") {
    let url =
      "http://172.22.107.22/WebReport/ReportServer?reportlet=%E6%96%B0%E7%89%88_%E7%AE%A1%E5%88%B6%E6%B4%A5%E8%B4%B4%E4%B8%AA%E4%BA%BA%E6%8A%A5%E8%A1%A8.cpt&op=view&userId=13&orgId=13";
    window.open(url, "_blank");
    return;
  }
  // atcos
  if (command == "atcosCurrent") {
    let url = currentSeatUrl.value;
    window.open(url, "_blank");
    return;
  }
  // atcos sup01
  if (command == "atcosSUP01") {
    let url = "http://172.22.107.22/atcos/loginGet?userName=SUP01&pwd=SUP01";
    window.open(url, "_blank");
    return;
  }
  // atcos sup02
  if (command == "atcosSUP02") {
    let url = "http://172.22.107.22/atcos/loginGet?userName=SUP02&pwd=SUP02";
    window.open(url, "_blank");
    return;
  }
  // atcos prep
  if (command == "atcosPREP") {
    let url = "http://172.22.107.22/atcos/loginGet?userName=PREP&pwd=PREP";
    window.open(url, "_blank");
    return;
  }
};

const currentSeatName = computed(() => {
  if (seatStore.currentSeat && seatStore.currentSeat.seatName != "") {
    return seatStore.currentSeat.seatName;
  } else {
    return null;
  }
});

const currentSeatUrl = computed(() => {
  if (seatStore.currentSeat && seatStore.currentSeat.seatName != "") {
    return (
      "http://172.22.107.22/atcos/loginGet?userName=" +
      seatStore.currentSeat.seatName +
      "&pwd=" +
      seatStore.currentSeat.seatName
    );
  } else {
    return "http://172.22.107.22/atcos/loginGet?userName=PREP&pwd=PREP";
  }
});
</script>

<style scoped>
.link-button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 36px;
  background-color: var(--el-color-primary);
  /* background-color: var(--el-color-primary-light-3); */
  color: #fff;
}
.link-button-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15em;
}
.link-button-icon:hover,
.link-button-icon:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
</style>
